<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>axios和express</title>
  <link rel="stylesheet" href="http://www.h5al.cn/js/bootstrap.css">
</head>
<body>
  <p>node server1.js 访问[http://localhost:3080/]，直接打开get.html不生效</p>
  <div id="app">
    {{msg}}
    <button @click="getUser">获取数据</button>
    <button @click="postUser">发送数据</button>
    <button @click="getData">获取百度数据</button>
    <hr>
    <div>
      模拟百度搜索框：<input type="text" v-model="query" @keyup="search" @keydown.down="downFn" @keydown.up.prevent="upFn">
      <ul class="list-group">
        <li v-for="(item,index) in list" class="list-group-item " :class="{active:index==ind}">{{item}}</li>
      </ul>
    </div>
  </div>

<script src="/node_modules/vue/dist/vue.js"></script>
<script src="/node_modules/axios/dist/axios.js"></script>
<script>
  let vm = new Vue({
    el:'#app',
    data:{
      msg:'',
      url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
      val:'',
      list:[],
      query:'',
      ind:-1
    },
    methods:{
      getUser(){
        axios.get('/getUser').then((res)=>{
          //得到后端返回的数据
          console.log(res.data)
          this.msg = res.data
        })
      },
      postUser(){
        let obj={name:'zfpx'}
        axios.post('/postUser',obj).then((res)=>{
          //得到后端返回的状态
          console.log(res)
        })
      },
      getData(){
        //百度接口api
        //https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=b
        //axios不支持jsonp
        this.val = 'b';
        let url = this.url+'?wd='+this.val+'&jsonp=1';
        let body = document.getElementsByTagName('body')[0];
        //插入一个script
        let script = document.createElement('script');
        script.setAttribute('src',url);
        body.appendChild(script);
        //为了符合百度查询api而建立的一个对象
        window.baidu = {};
        //script载入完之后会调用这个函数，sug就是suggest的内容
        window.baidu.sug = function(sug){
            console.log(sug);
        }
      },
      getList(){
        return new Promise((resolve,reject)=>{ 
          if(this.query === '') return resolve(0)
          let url = this.url+'?wd='+this.query+'&jsonp=cb';
          let body = document.getElementsByTagName('body')[0];
          let script = document.createElement('script');
          script.setAttribute('src',url);
          body.appendChild(script);
          window.baidu = {};
          window.baidu.sug = function(sug){
              resolve(sug)
          }
        })
      },
      search(e){
        if(e.keyCode == 38 || e.keyCode == 40) return
        if(e.keyCode == 13){
          return window.open('https://www.baidu.com/s?wd=' + this.query)
        }
        this.getList().then(res=>{
          if(res == 0){
            this.list = [];
          }else{
            let datas = res.s;
            this.list = datas;
          }
        })
      },
      downFn(){
        if(this.ind==this.list.length-1){
          this.ind = 0
        }else{
          this.ind++;
        }
        this.query = this.list[this.ind];
      },
      upFn(){
        if(this.ind == 0){
          this.ind = this.list.length-1
        }else{
          this.ind--;
        }
        this.query = this.list[this.ind];
      }
    }
  })

</script>
</body>
</html>